import React, {Component} from "react";
import {View, TouchableOpacity, Alert, StyleSheet, Dimensions, Modal, Text, Image,SafeAreaView} from "react-native";
import Separator from "../Separator";

const {width, height} = Dimensions.get('window');

type Props = {
    info:Object,
    onPress:Function,
    closeModal:Function,
}

export default class PayAlertDialog extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
            alipy: require('../../../res/img/detail/detail_un_select.png'),
            wechat: require('../../../res/img/detail/detail_select.png'),
            payment: 'wxpay',
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
    }

    close() {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }

    wechat() {
        this.setState({
            wechat: require('../../../res/img/detail/detail_select.png'),
            alipy: require('../../../res/img/detail/detail_un_select.png'),
            payment: 'wxpay',
        })

    }

    pay() {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        this.props.onPress(this.state.payment);
    }

    AliPay() {

        this.setState({
            alipy: require('../../../res/img/detail/detail_select.png'),
            wechat: require('../../../res/img/detail/detail_un_select.png'),
            payment: 'alipay',
        })
    }

    renderDialog() {
        const {info} = this.props

        let yingPrice = (info.amount - info.discount) > 0?(info.amount - info.discount):0


        return (
            <SafeAreaView style={styles.modalStyle}>
                <Text style={styles.text}>付款详情</Text>
                <Separator />
                <View style={styles.money}>
                    <Text style={styles.text2}>确认支付金额</Text><Text style={styles.text3}>{yingPrice}</Text>
                </View>

                <Separator/>

                <Text style={styles.text2}>选择支付平台</Text>
                <TouchableOpacity style={styles.pay_view} onPress={()=>{this.AliPay()}}>
                    <Image source={require('../../../res/img/detail/alipay.png')}/>
                    <View style={{marginLeft:27,flexDirection:'column'}}>
                        <Text style={styles.pay_title}>支付宝支付</Text>
                        <Text style={styles.pay_small_title}>Alipay to pay</Text>
                    </View>
                    <View style={{flex:1}}/>
                    <View style={{width:21,height:21}}>
                        <Image source={this.state.alipy}/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.pay_view} onPress={()=>{this.wechat()}}>
                    <Image source={require('../../../res/img/detail/weichat.png')}/>
                    <View style={{marginLeft:27,flexDirection:'column'}}>
                        <View style={{flexDirection:'row'}}>
                            <Text style={styles.pay_title}>微信支付</Text>
                            <View style={{backgroundColor:'#835110',borderRadius:3,marginLeft:6,paddingLeft:5,paddingRight:5,paddingTop:1,paddingBottom:1,alignItems:'center',justifyContent:'center'}}>
                                <Text style={{color:'white',fontSize:10,fontWeight:'200'}}>推荐</Text>
                            </View>
                        </View>
                        <Text style={styles.pay_small_title}>WeChat payment</Text>
                    </View>
                    <View style={{flex:1}}/>
                    <View style={{width:21,height:21}}>
                        <Image source={this.state.wechat}/>
                    </View>
                </TouchableOpacity>
                <Separator style={{marginLeft:12,marginRight:12}}/>
                <TouchableOpacity style={styles.pay} onPress={()=>{this.pay()}}>
                    <Text style={styles.payText}>立即支付</Text>
                </TouchableOpacity>
            </SafeAreaView>
        )
    }

    render() {

        return (
            <View style={{flex: 1}}>
                <Modal
                    transparent={true}
                    visible={this.state.isVisible}
                    animationType={'fade'}
                    >
                    <TouchableOpacity style={styles.container} activeOpacity={1}
                                      onPress={() => this.close()}>
                        {this.renderDialog()}
                    </TouchableOpacity>
                </Modal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    modalStyle: {
        position: "absolute",
        top: height - 300,
        left: 0,
        width: width,
        height: 300,
        backgroundColor: '#ffffff'
    },
    text: {
        fontSize: 15,
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'center',
        margin: 10
    },
    text2: {
        fontSize: 14,
        margin: 10,
    },
    text3: {
        fontSize: 14,
        margin: 10,
        fontWeight:'bold',
    },
    pay: {
        height: 50,
        backgroundColor: '#DB3853',
        justifyContent: 'center',
    },
    payText: {
        color: 'white',
        textAlign: 'center',
        fontWeight: 'bold',
        fontSize: 13,
    },
    money: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    pay_view:{
        paddingLeft:20,
        paddingRight:20,
        marginBottom:15,
        backgroundColor:'white',
        flexDirection:'row',
        alignItems:'center',
    },
    pay_title:{
        color:'rgba(0,0,0,0.7)',
        fontSize:13,
    },
    pay_small_title:{
        marginTop:3,
        color:'rgba(0,0,0,0.3)',
        fontSize:10,
        fontWeight:'bold',
    },
});